<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>今日数据</h2>
                <div class="clearfix"></div>
            </div>

            <div class="x_content" style="display: block;">
                <table class="table">
                    <thead>
                    <tr>
                        <th width="20%">新增订单数</th>
                        <th width="20%">未支付订单</th>
                        <th width="20%">已支付订单</th>
                        <th width="20%">支付总金额</th>
                        <th width="20%">售后申请单数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td scope="row">{$today.order_num}</td>
                        <td>{$today.not_yet_order_num}</td>
                        <td>{$today.yet_order_num}</td>
                        <td>{$today.yet_order_money}</td>
                        <td>{$today.service_order_num}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>历史数据查询</h2>
                <div class="clearfix"></div>
            </div>
            <div class="row-fluid">
                <input type="text"  name="start_time" value="{if isset($start_time)}{$start_time}{/if}" placeholder="开始时间" id="J_dh_start" class="form-control-new" >
                <input type="text"  name="end_time" value="{if isset($end_time)}{$end_time}{/if}" placeholder="结束时间" id="J_dh_end" class="form-control-new" >
                <button id="search" class="btn btn-primary" type="submit">查询</button>
            </div>
            <div class="x_content" style="display: block;">
                <table class="table">
                    <thead>
                    <tr>
                        <th width="20%">新增订单数</th>
                        <th width="20%">未支付订单</th>
                        <th width="20%">已支付订单</th>
                        <th width="20%">支付总金额</th>
                        <th width="20%">售后申请单数</th>
                    </tr>
                    </thead>
                    <tbody id="result1">
                    <tr>
                        <td scope="row">0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>订单销售统计</h2>
                <div class="clearfix"></div>
            </div>
            <div class="row-fluid">
                <input type="radio"  name="type" value="0">按年份
                <input type="radio" checked="checked" name="type" value="1">按月份
                <input type="text"  name="time" value="{date('Y-m')}" placeholder="月份" id="time" class="form-control-new" >
                <input type="text" style="display: none" name="time1" value="{date('Y')}" placeholder="年份" id="time1" class="form-control-new" >
                <button id="submit" class="btn btn-primary" type="submit">提交</button>
            </div>
            <div id="main" class="x_content" style="float:left;display: block;width: 900px;height:400px;">

            </div>
            <div id="main1" class="x_content" style="float:left;display: block;width: 900px;height:400px;">

            </div>




        </div>
    </div>
    <div></div>
</div>

<script type="text/javascript" src="{$theme}/libs/js/datepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="{$theme}/libs/js/echart/echarts.min.js"></script>
<script>
    var startDate = $('#J_dh_start').datetimepicker({
        format: "yyyy-MM-dd",
        autoclose: true,
        todayBtn: true,
        minView: 2,
    })

    var endDate = $('#J_dh_end').datetimepicker({
        format: "yyyy-MM-dd",
        autoclose: true,
        todayBtn: true,
        minView: 2,
    })



    $("#search").click(function(){
        start_time = $("#J_dh_start").val();
        end_time = $("#J_dh_end").val();
        var url = "{['index/index']|U}";
        $.post(url, 'start_time='+start_time+'&end_time='+end_time, function (data) {
            $('#result1').html('');
            html = "<tr>";
            html += '<td scope="row">'+data.order_num+"</td>";
            html += "<td>"+data.not_yet_order_num+"</td>";
            html += "<td>"+data.yet_order_num+"</td>";
            html += "<td>"+data.yet_order_money+"</td>";
            html += "<td>"+data.service_order_num+"</td>";
            html += "</tr>";
            $('#result1').html(html)

        },'json');
    });

    var time = $('#time').datetimepicker({
        format: "yyyy-mm",
        autoclose: true,
        todayBtn: true,
        startView: 'year',
        minView:3
    })

    time = $('#time1').datetimepicker({
        format: "yyyy",
        autoclose: true,
        todayBtn: true,
        startView: 'decade',
        minView:4
    })

    $('input[type=radio][name=type]').change(function() {
        if($(this).val()==0){
            $('#time1').show()
            $('#time').hide();
        }else{
            $('#time').show()
            $('#time1').hide();
        }
    });


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var data = {$order_data_chart};
    var key = new Array();
    var yet_order_num = new Array();
    var yet_order_money = new Array();
    var money_per_customer = new Array();
    data.forEach( function( val, index ) {
        key.push(index+1);
        yet_order_num.push(val.yet_order_num);
        yet_order_money.push(val.yet_order_money);
        money_per_customer.push(val.money_per_customer);
    });
    //var x =
    // 指定图表的配置项和数据
    var option = {
        title: {
            show:true,
            text: "订单数"
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: key
        },
        yAxis: {
        },
        series: [
            {
                name: '销量',
                type: 'line',
                data: yet_order_num
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '订单总额和客单价'
        },
        tooltip: {},
        legend: {
            data:['订单总额','客单价']
        },
        xAxis: {
            data: key
        },
        yAxis: {},
        series: [
            {
                name: '订单总额',
                type: 'bar',
                data: yet_order_money
            },
            {
                name: '客单价',
                type: 'bar',
                data: money_per_customer
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);


    $("#submit").click(function(){
        var type=$('input:radio[name="type"]:checked').val();
        var time
        if(type==0){
            time = $("#time1").val();
        }else{
            time = $("#time").val();
        }
        var option,option1;
        var url = "{['index/index']|U}";
        myChart.showLoading();
        myChart1.showLoading();
        $.post(url, 'type='+type+'&time='+time, function (data) {
            var key = new Array();
            var yet_order_num = new Array();
            var yet_order_money = new Array();
            var money_per_customer = new Array();
            //console.log(data);
            data.forEach( function( val, index ) {
                key.push(index+1);
                yet_order_num.push(val.yet_order_num);
                yet_order_money.push(val.yet_order_money);
                money_per_customer.push(val.money_per_customer);
            });
            myChart.hideLoading();
            myChart1.hideLoading();
            option = {
                title: {
                    text: '订单数'
                },
                tooltip: {},
                legend: {
                    data:['数量']
                },
                xAxis: {
                    data: key
                },
                yAxis: {
                },
                series: [
                    {
                        name: '销量',
                        type: 'line',
                        data: yet_order_num
                    }
                ]
            };
            myChart.setOption(option);
            option1 = {
                title: {
                    text: '订单总额和客单价'
                },
                tooltip: {},
                legend: {
                    data:['订单总额和客单价']
                },
                xAxis: {
                    data: key
                },
                yAxis: {},
                series: [
                    {
                        name: '订单总额',
                        type: 'bar',
                        data: yet_order_money
                    },
                    {
                        name: '客单价',
                        type: 'bar',
                        data: money_per_customer
                    }
                ]
            };
            myChart1.setOption(option1);

        },'json');
    });


</script>
